<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建项目测试页面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <style>
        body {
            padding: 20px;
            background: #f8f9fa;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .debug-info {
            background: #e9ecef;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
            font-family: monospace;
            font-size: 12px;
        }
        /* 确保模态框有足够高的z-index */
        .modal {
            z-index: 9999 !important;
        }
        .modal-backdrop {
            z-index: 9998 !important;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1><i class="bi bi-bug"></i> 创建项目功能测试</h1>
        
        <div class="debug-info" id="debug-output">
            <strong>调试信息:</strong><br>
            等待测试...
        </div>
        
        <div class="d-grid gap-2">
            <button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#createProjectModal">
                <i class="bi bi-plus-circle"></i> 创建新项目 (Bootstrap方式)
            </button>
            
            <button class="btn btn-success btn-lg" id="programmaticCreate">
                <i class="bi bi-gear"></i> 创建新项目 (程序化方式)
            </button>
            
            <button class="btn btn-info btn-lg" id="checkStatus">
                <i class="bi bi-search"></i> 检查页面状态
            </button>
        </div>
    </div>

    <!-- 创建项目模态框 -->
    <div class="modal fade" id="createProjectModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-plus-circle"></i> 创建新项目
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="create-project-form">
                        <div class="mb-3">
                            <label for="project-name" class="form-label">项目名称</label>
                            <input type="text" class="form-control" id="project-name" required>
                            <div class="form-text">请输入项目的名称，用于标识和管理</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="project-description" class="form-label">项目介绍</label>
                            <div id="project-description-editor" style="height: 150px;"></div>
                            <div class="form-text">描述项目的目标、内容和特色，支持富文本格式</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="main-image" class="form-label">项目主图</label>
                            <input type="file" class="form-control" id="main-image" accept="image/*">
                            <div class="form-text">上传项目的主要展示图片（支持 JPG、PNG、GIF 格式，最大 5MB）</div>
                            <div id="image-preview" class="mt-2" style="display: none;">
                                <small class="text-muted">图片预览：</small><br>
                                <img id="image-preview-img" src="" alt="图片预览" class="img-thumbnail" style="max-width: 200px; max-height: 150px;">
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">表单字段配置</label>
                            <div id="field-types-container">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="fieldTypes" value="1" id="field1">
                                    <label class="form-check-label" for="field1">文本字段</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="fieldTypes" value="2" id="field2">
                                    <label class="form-check-label" for="field2">数字字段</label>
                                </div>
                            </div>
                            <div class="form-text">选择此项目需要收集的数据字段</div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="create-project">创建项目</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script>
        let quill;
        const debugOutput = document.getElementById('debug-output');
        
        function log(message) {
            console.log(message);
            const now = new Date().toLocaleTimeString();
            debugOutput.innerHTML += `[${now}] ${message}<br>`;
            debugOutput.scrollTop = debugOutput.scrollHeight;
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            log('页面加载完成');
            log('Bootstrap版本: ' + (window.bootstrap ? bootstrap.Tooltip.VERSION || '已加载' : '未加载'));
            log('Quill版本: ' + (window.Quill ? Quill.version || '已加载' : '未加载'));
            
            // 程序化打开模态框
            document.getElementById('programmaticCreate').addEventListener('click', function() {
                try {
                    const modal = new bootstrap.Modal(document.getElementById('createProjectModal'));
                    modal.show();
                    log('程序化打开模态框成功');
                } catch (error) {
                    log('程序化打开模态框失败: ' + error.message);
                }
            });
            
            // 检查页面状态
            document.getElementById('checkStatus').addEventListener('click', function() {
                log('=== 页面状态检查 ===');
                log('模态框数量: ' + document.querySelectorAll('.modal').length);
                log('模态框背景数量: ' + document.querySelectorAll('.modal-backdrop').length);
                
                const modal = document.getElementById('createProjectModal');
                if (modal) {
                    const computedStyle = window.getComputedStyle(modal);
                    log('模态框z-index: ' + computedStyle.zIndex);
                    log('模态框display: ' + computedStyle.display);
                    log('模态框visibility: ' + computedStyle.visibility);
                }
                
                log('Quill编辑器状态: ' + (quill ? '已初始化' : '未初始化'));
            });
            
            // 监听模态框事件
            const modal = document.getElementById('createProjectModal');
            modal.addEventListener('show.bs.modal', function() {
                log('模态框开始显示');
                
                // 初始化Quill编辑器
                if (!quill) {
                    try {
                        quill = new Quill('#project-description-editor', {
                            theme: 'snow',
                            placeholder: '请输入项目介绍...',
                            modules: {
                                toolbar: [
                                    ['bold', 'italic', 'underline'],
                                    ['link'],
                                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                                    ['clean']
                                ]
                            }
                        });
                        log('Quill编辑器初始化成功');
                    } catch (error) {
                        log('Quill编辑器初始化失败: ' + error.message);
                    }
                }
            });
            
            modal.addEventListener('shown.bs.modal', function() {
                log('模态框显示完成');
            });
            
            modal.addEventListener('hide.bs.modal', function() {
                log('模态框开始隐藏');
            });
            
            modal.addEventListener('hidden.bs.modal', function() {
                log('模态框隐藏完成');
            });
            
            // 图片预览功能
            document.getElementById('main-image').addEventListener('change', function(e) {
                const file = e.target.files[0];
                const preview = document.getElementById('image-preview');
                const previewImg = document.getElementById('image-preview-img');
                
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImg.src = e.target.result;
                        preview.style.display = 'block';
                        log('图片预览加载成功');
                    };
                    reader.readAsDataURL(file);
                } else {
                    preview.style.display = 'none';
                }
            });
            
            // 创建项目按钮
            document.getElementById('create-project').addEventListener('click', function() {
                const projectName = document.getElementById('project-name').value.trim();
                const projectDescription = quill ? quill.root.innerHTML.trim() : '';
                const selectedFields = Array.from(document.querySelectorAll('input[name="fieldTypes"]:checked')).map(cb => cb.value);
                
                log('=== 创建项目测试 ===');
                log('项目名称: ' + (projectName || '(空)'));
                log('项目描述: ' + (projectDescription || '(空)'));
                log('选中字段: ' + (selectedFields.length > 0 ? selectedFields.join(', ') : '(无)'));
                
                if (!projectName) {
                    alert('请输入项目名称');
                    return;
                }
                
                if (selectedFields.length === 0) {
                    alert('请至少选择一个表单字段');
                    return;
                }
                
                log('表单验证通过，可以提交到后端API');
                alert('测试成功！表单数据验证通过。');
            });
        });
    </script>
</body>
</html>